<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>综合分析</title>
		<link rel="stylesheet" href="../src/css/layui.css">
		<link rel="stylesheet" type="text/css" href="../dist/css/common.css" />
		<style type="text/css">
			.layui-form-switch {
				margin-top: 0;
			}
			
			.layui-form-radio {
				margin-top: 0;
			}
			
			.w-videos {
				height: 205px;
				padding: 5px;
				box-sizing: border-box;
				border: 1px solid #CCCCCC;
				border-radius: 5px;
			}
			
			.w-videos img {
				width: 100%;
				height: 170px;
			}
			
			.w-videos p {
				height: 25px;
				line-height: 25px;
				text-indent: 25px;
			}
			
			.w-line-gray {
				background: #CCCCCC;
				height: 1px;
				margin: 15px 0;
			}
			
			.w-result {
				padding: 9px 15px;
				border: 1px solid #CCCCCC;
				float: left;
				margin-right: 10px;
			}
			
			.w-result i {
				padding-left: 10px;
				font-size: 18px;
			}
			.w-checkboxs input[type='checkbox']{
				height: 36px;
				margin-left: 5px;
			}
			.layui-form-checkbox{
				height: 38px;
				line-height: 38px;
			}
			.layui-form-checkbox i{
				line-height: 36px;
				height: 36px;
			}
			.w-dialog{
				width:80%;
				height: 300px;
				background: #fff;
				position: absolute;
				top: 20%;
				left: 5%;
				z-index: 999;
				padding: 20px;
				display: none;
			}#wclose{
				font-size: 20px;
				float: right;
				padding:5px 15px;
				cursor: pointer;
			}
			.w-dialog-bg{
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background: #000;
				opacity: 0.5;
				z-index: 998;
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="layui-fluid">
			<div class="w-title"><span class="w-blueline"></span>
				<a href="###">综合分析</a>
			</div>
			<form class="layui-form" action="">
				<div class="layui-row">
					<!--<div class="layui-col-md1">&nbsp;</div>-->
					<div class="layui-col-md4">
						<div class="layui-form-item">
							<label class="layui-form-label">选择开始时间</label>
							<div class="layui-input-block">
								<input type="text" name="title" required="" lay-verify="required" placeholder="请输入联系人" autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-col-md4">请选择想要分析的时间段，选择时间段内的分析统计</div>
				</div>
				<div class="layui-row">
					<div class="layui-col-md4">
						<div class="layui-form-item">
							<label class="layui-form-label">选择结束时间</label>
							<div class="layui-input-block">
								<input type="text" name="title" required="" lay-verify="required" placeholder="请输入联系人" autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-col-md4">请选择想要分析的时间段，选择时间段内的分析统计</div>
				</div>
				<div class="layui-row">
					<!--<div class="layui-col-md1">&nbsp;</div>-->
					<div class="layui-col-md4">
						<div class="layui-form-item">
							<label class="layui-form-label">选择地块</label>
							<div class="layui-input-block">
								<input type="text" name="title" required="" lay-verify="required" placeholder="请输入联系人" autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-col-md4">
						<a id="wchoose" href="###" class="layui-btn" style="margin-left: 10px;height: 36px;">选取</a>
					</div>
				</div>
				<div class="layui-row">
					<!--<div class="layui-col-md1">&nbsp;</div>-->
					<div class="layui-col-md10">
						<div class="layui-form-item">
							<label class="layui-form-label">选择结果</label>
							<div class="layui-input-block">
								<a class="w-result" href="">111<i>&times;</i></a>
								<a class="w-result" href="">111<i>&times;</i></a>
								<a class="w-result" href="">111<i>&times;</i></a>
								<a class="w-result" href="">111<i>&times;</i></a>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-row">
					<!--<div class="layui-col-md1">&nbsp;</div>-->
					<div class="layui-col-md2">
						<label class="layui-form-label">分析项目</label>
					</div>
					<div class="layui-col-md1">
						<a href="###" class="layui-btn" style="margin-left: 10px;height: 36px;">确定</a>
					</div>
					<div class="layui-col-md9">
						<div class="w-checkboxs">
							<input type="checkbox" name="" id="" value="" title="PH值"/>
							<input type="checkbox" name="" id="" value="" title="电池电量"/>
							<input type="checkbox" name="" id="" value="" title="二氧化碳"/>
							<input type="checkbox" name="" id="" value="" title="风速"/>
						</div>
					</div>
				</div>

		</form>
		<div class="w-line-gray"></div>
		<!--<div class="layui-row layui-col-space10">
			<div class="layui-col-md3">
				<div class="w-videos">
					<img src="../dist/images/video_03.png" />
					<p>大屯村监测点1</p>
				</div>
			</div>
			<div class="layui-col-md3">
				<div class="w-videos">
					<img src="../dist/images/video_03.png" />
					<p>大屯村监测点1</p>
				</div>
			</div>
			<div class="layui-col-md3">
				<div class="w-videos">
					<img src="../dist/images/video_03.png" />
					<p>大屯村监测点1</p>
				</div>
			</div>
			<div class="layui-col-md3">
				<div class="w-videos">
					<img src="../dist/images/video_03.png" />
					<p>大屯村监测点1</p>
				</div>
			</div>
		</div>
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md3">
				<div class="w-videos">
					<img src="../dist/images/video_03.png" />
					<p>大屯村监测点1</p>
				</div>
			</div>
			<div class="layui-col-md3">
				<div class="w-videos">
					<img src="../dist/images/video_03.png" />
					<p>大屯村监测点1</p>
				</div>
			</div>
			<div class="layui-col-md3">
				<div class="w-videos">
					<img src="../dist/images/video_03.png" />
					<p>大屯村监测点1</p>
				</div>
			</div>
			<div class="layui-col-md3">
				<div class="w-videos">
					<img src="../dist/images/video_03.png" />
					<p>大屯村监测点1</p>
				</div>
			</div>
		</div>

	-->	</div>
		<!--<div id="page1"></div>-->
		<div class="w-dialog">
			<p style="height: 40px;line-height: 40px;text-indent: 15px;">选择地块<span id="wclose">&times;</span></p>
			<table width="100%" id="demoTable" lay-filter="test"></table>
			<div class="layui-row">
					<div class="layui-col-md12 alignright">
						<a href="###" class="layui-btn" style="margin-left: 10px;height: 36px;">确定</a>
						<a href="###" class="layui-btn" style="margin-left: 10px;height: 36px;">取消</a>
					</div>
				</div>
		</div>
		<div class="w-dialog-bg"></div>
		<script src="../src/layui.js"></script>
		<script>
			layui.use('form', function() {
				var form = layui.form;

				//监听提交
				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});
			layui.use('laypage', function() {
				var laypage = layui.laypage;

				//执行一个laypage实例
				laypage.render({
					elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
						,
					count: 50 //数据总数，从服务端得到
				});
			});
			layui.use(['table', 'jquery'], function() {
				var table = layui.table;
				var $ = jQuery = layui.$;
				$("#wclose").on('click',function(){
					$(".w-dialog,.w-dialog-bg").hide();
				});
				$("#wchoose").on('click',function(){
					$(".w-dialog,.w-dialog-bg").show();
				})
				//第一个实例
				table.render({
					elem: '#demoTable',
					//					height: 315
					//  ,url: '/demo/table/user/' //数据接口
					//						,
					page: true //开启分页
						,
					cols: [
						[ //表头
							{
								field: 'id',
								title: '',
								width: '20%',
								align: 'center',
								fixed: 'left'
							}, {
								field: 'dkmc',
								title: '地块名称',
								align: 'center',
								width: '30%'
							},{
								field: 'sblx',
								title: '设备类型',
								align: 'center',
								width: '30%'
							}
						]
					],
					data: [{
						"id": "<div><input type='checkbox'></div>",
						"dkmc": "杜甫",
						"cjsj": "男",
						"sbid": "浙江杭州",
						"sblx": "人生恰似一场修行",
						"cz": "116",
					}, {
						"id": "<input type='checkbox'>",
						"dkmc": "杜甫",
						"cjsj": "男",
						"sbid": "浙江杭州",
						"sblx": "人生恰似一场修行",
						"cz": "116",
					}]
				});
				$('.demoTable .layui-btn').on('click', function() {
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});
			});
		</script>
	</body>

</html>